<template>
  <div>
          <van-nav-bar
      title="支付成功"
      fixed
      placeholder
      z-index="999"
      left-arrow
      @click-left="$router.back()"
    />

<div class="paySuccess">
<div class="paySuccess-icon">
  <van-icon name="checked" size="34" color="green" />
</div>

<div class="paySuccess-text">
    支付成功
</div>
<div class="paySuccess-tips">
  请讲您的核销码展示给商家
</div>

<div class="paySuccess-qrCode">
  <div>
  {{detail.orderSn}}
  </div>
  <img :src="detail.qrCodeImg" alt="">
  <div>
     {{detail.person}}张票  {{detail.statusText}}
  </div>
</div>


<van-button class="saveImg" @click="save" size="large" color="#DB281F">
   保存图片
</van-button>

</div>

  </div>
</template>

<script>

import QRCode from 'qrcode';

let statusMap = {
    "1":"待付款",
    "2":"待消费",
    "3":"已消费",
    "4":"待评价",
    "5":"已评价",
    "8":"订单已取消",
    "9":"已过期"
}

export default {
    name:'paySuccess',
    computed:{
        orderId(){
            return this.$route.query.orderId
        }
    },
    data(){
        return {
         detail:{}
        }
    },
    mounted(){

        this.getOrderDetail()
    },
    methods:{
        save(){
           let {qrCodeImg} = this.detail;

           let a = document.createElement('a');

           a.href = qrCodeImg;

           a.download = 'code.png'

           document.body.appendChild(a)

           a.click()

           document.body.removeChild(a)

           


        },
     
     getOrderDetail(){
         let uni_id_token = localStorage.getItem('xl-token');
         let orderId = this.orderId
         this.$http.post('/apis/order/kh/orderDetail',{
             uni_id_token,
             orderId
         })
         .then(res=>{

             console.log(res)
             this.detail = res.data;

             this.detail.statusText = statusMap[this.detail.status]


      let params = {
          orderSn:this.detail.orderSn,
          uid:localStorage.getItem('xl-uid')
      }

             QRCode.toDataURL(JSON.stringify(params))
                    .then(url => {
                        console.log(url)
                   

                          this.$set( this.detail,'qrCodeImg',url)

//  如果有扫码设备   等于是把这些参数传进去

                    })
                    .catch(err => {
                        console.error(err)
                    })
         
         })
     }

    }

}
</script>

<style lang="scss">
.paySuccess{

    display: flex;
    flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   height: calc(100vh - 46px);
   &-icon{
       margin: 10px 0;
   }
   &-tips{
       font-size: 12px;
       color: #999;
       margin-top: 20px;
   }

   &-qrCode{
     
     width: 200px;
     height: 200px;
      margin-top: 30px;
      border-radius: 5px;
      box-shadow: 0 0 8px 1px rgba($color: #000000, $alpha: 0.1);

      display: flex;
        flex-direction: column;
   align-items: center;
   justify-content: center;

   img{
       width: 100px;
       height: 100px;
       margin: 5px 0;
   }

   }
   .saveImg{
    // justify-items: end;
    // align-self: flex-end;
    // align-content:flex-end
    position: fixed;
    bottom: 5px;
    

   }
}

</style>